page {
    height: 100vh;
    background-color: #F4F5F7;

}

.tabBar {
  display: flex;
  flex-wrap: nowrap;
  background-color: #FBF2F2;
  border-bottom: 1rpx solid #ccc;
  .tabBar-item {
      width: 25%;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .box {
          width: 90rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
      }
          // 选择样式发生变化
  .active {
      color:red;
      border-bottom: 1rpx solid red;
  }
  }

}
.container {
    margin-top: 20rpx;
    background-color: #fff;
    padding: 40rpx;
    border-radius: 27rpx;
    font-size: 25rpx;
    box-shadow: 1rpx 1rpx 1rpx #888888;
   


    .container-header {
        border-bottom: 1rpx solid #ccc;
        padding-bottom: 10rpx;

      .header-info {
         font-size: 30rpx;
          margin-top: 10rpx;
  
      }
      .info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10rpx;


        .header-container{

        }
        .state-info {
            color:red

        }
        .work {
          color:red;
      }
      .nowork{
          color: #000;
  
      }
      .done {
          color: blue;
  
      }

      }
  
    
  
      .header-boffon {
          display: flex;
          justify-content: space-between;
          align-items: center;
        .buffon {
            margin-top: 20rpx;
  
        }
  
        .item-num {
  
        }
      }
    }
  
    .contianer-body {
      .body-start-date {
          margin-top: 10rpx;
  
      }
  
      .body-end {
          margin-top: 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .end-data {
  
        }
  
        .body-num {
  
        }
      }
      .remark {
          margin-top: 10rpx;
      }
    }
  }